<template>
  <div class="chooseAddress">
    <van-nav-bar
      title="选择地址"
      left-arrow
      @click-left="onBack"
      class="navBar"
    />

    <van-cell
      class="address"
      v-for="item in AddressList"
      :key="item.id"
      @click="chooseAddress(item)"
    >
      <template slot="title">
        <span class="name">{{ item.name }}</span>
        <span class="sex">{{ item.sex === 1 ? '男' : '女' }}</span>
        <span>{{ item.phone }}</span>
      </template>
      <template slot="label">
        <span class="position">{{ item.tag }}</span>
        <span>{{ item.address }}</span>
      </template>
      <template #right-icon>
        <van-checkbox :value="checkedId == item.id" />
      </template>
    </van-cell>

    <div class="footer">
      <van-button  icon="plus"  type="info" block @click="$router.push('/profile/info/add')">新增收货地址</van-button>
    </div>
  </div>
</template>

<script>
import { getAddresses } from '@/api/profile'
// import { cloneDeep } from '@/utils/storage'
export default {
  name: 'chooseAddress',
  data() {
    return {
      userId: this.$route.query.id,
      AddressList: [],
      checkedId: this.$route.query.sig
    }
  },
  methods: {
    // 获取全部地址
    async getAddresses() {
      const { data } = await getAddresses(this.userId)
      this.AddressList = data
    },
    // 返回选中地址
    chooseAddress(item) {
      this.checkedId = item.id
      // sessionStorage.setItem('address',JSON.stringify(item))
      this.$router.push('/confirmOrder')
      setTimeout(() => {
        this.$bus.$emit('chooseAddress', item)
      }, 0)
    },
    // 返回默认地址
    onBack() {
      this.$router.push('/confirmOrder')
      const obj = this.AddressList.find(item => {
        return item.id == this.checkedId
      })
      setTimeout(() => {
        this.$bus.$emit('chooseAddress', obj)
      }, 0)
    }
  },
  created() {
    this.getAddresses()
  }
}
</script>

<style lang="less" scoped>
.chooseAddress {
  padding-top: 46px;
  /deep/.navBar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #4e7ee8;
    .van-nav-bar__title,
    .van-icon-user-o,
    .van-icon-arrow-left {
      font-size: 20px;
      color: #fff;
    }
  }
  .address {
    margin-bottom: 10px;
    align-items: center;
    .van-checkbox {
      margin-left: 10px;
    }
    .van-cell__label {
      font-size: 14px;
    }
    .name {
      margin-right: 5px;
      font-size: 18px;
      font-weight: 700;
    }
    .sex {
      margin-right: 5px;
    }
    .position {
      display: inline-block;
      padding: 0 5px;
      margin-right: 5px;
      border-radius: 3px;
      background-color: #4cd964;
      color: #fff;
    }
  }
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    .van-button--info {
      border: none;
      .van-button__text {
      font-size: 18px;
      }
    }
  }
}
</style>
